<template>
<div class="edit_user_date">
    <head-top :headTitle="title" :go-back='true'></head-top>
    <div class="center">
        <div class="date_wrap ">
            <!-- <my-datePecker class="date_ipt" v-model="value" type="date" placeholder="选择日期"></my-datePecker> -->
            <div id="date-selector-input" class="date_ipt">{{ birthday }}</div>
            <div id="targetContainer"></div>
        </div>
        <div class="btn_wrap">
            <div class="btn" @click="saveBirthday">确定修改</div>
        </div>
    </div>
</div>
</template>

<script>
import DateSelector from "mob-date-selector";
import "mob-date-selector/index.css";
import Bus from "@/components/bus.js";

export default {
    data() {
        return {
            _id: "",
            birthday: "",
            title: "修改生日"
        };
    },
    methods: {
        saveBirthday() {
            this.$axios
                .put(`/api/wzg/updataUserBrithday/${this._id}`, {
                    birthday: this.birthday
                })
                .then(res => {
                    if (res.status == 200) {
                        console.log("更新成功");
                        this.birthday = res.data;
                        Bus.$emit('updateData',"birthday",res.data);
                        this.$zg_message({
                          message:'修改成功',
                          type:1,
                          time:2000
                        });
                    }
                })
                .catch(err => {
                    this.$zg_message({
                          message:'修改失败',
                          type:0,
                          time:2000
                        });
                    console.log(err);
                });
        }
    },
    components: {},
    mounted: function () {
        this.$nextTick(function () {
            var that = this;
            var userInfo = Bus.BusUserInfo;
            var birthday = this.$route.params.birthday ? this.$route.params.birthday : userInfo.birthday;
            var date = new Date();
            var year = date.getFullYear(),
                month = date.getMonth() + 1,
                day = date.getDate();
            var endDate = [year, month, day];

            if (birthday) {
                var yearMonthDay = birthday.split("-");
                var recentTimeClone = [
                    yearMonthDay[0],
                    yearMonthDay[1],
                    yearMonthDay[2]
                ];
            } else {
                var recentTimeClone = endDate;
            }
            console.log(this.$route.params);

            that._id = this.$route.params.user;
            that.birthday = this.$route.params.birthday;
            // Code that will run only after the
            // entire view has been rendered
            new DateSelector({
                input: "date-selector-input",
                container: "targetContainer",
                type: 0,
                param: [1, 1, 1, 0, 0],
                beginTime: [year - 100, 1, 1],
                endTime: endDate,
                recentTime: recentTimeClone,
                success: function (date) {
                    that.birthday = date[0] + "-" + date[1] + "-" + date[2];
                }
            });
        });
    }
};
</script>

<style lang="css" scoped>
.edit_user_date {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: #fafafa;
}

.btn_wrap .btn {
    color: #69d6c6;
}

.date_wrap {
    padding-top: 34px;
    margin-top: 20px;
}

.date_wrap .date_ipt {
    width: 100%;
    border: 1px solid #e3e3e3;
    color: #515c71;
    text-align: center;
    height: 35px;
    line-height: 35px;
}
</style>
